@import "_global.scss";
body{
    background-color: #F2F2F2;
}
header{
    width: 100%;
    background-color: #F5F5F5;
}
.header{
    @extend %w;
    height: 35px;
    display: flex;
    justify-content: space-between;
    
    .left{
        width: 40%;
        display: flex;
        justify-content: space-between;

        &>.heardeleft{
            display: flex;
            justify-content: space-between;
            width: 80%;
            height: 35px;
            list-style: none;
            &>a{
                text-decoration: none;
                color: black;
                font-size: 12px;
                color: gray;
                line-height: 35px;
                margin-left: -10px;
                &:hover{
                    color: orangered;
                }
            }

            &>li{
                width: 20%;
                font-size: 12px;
                color: gray;
                line-height: 35px;
                text-align: center;
                &:hover{
                    color: orangered;
                }
            }
        }

        select{
            font-size: 12px;
            // margin-left: 3%;
            width: 15%;
            line-height: 35px;
            border: 0px;
            background-color: F5F5F5;
            outline: none;

            option{
                outline: none;
            }
        }
        &>.iconfont{
            margin-left: 15px;
            display: inline-block;
            line-height: 35px;
            color: orangered;
        }
    }

    .right{
        width: 50%;
        // background-color: #F5F5F5;
        &>ul{
            display: flex;
            justify-content: space-between;
            &>a{
                text-decoration: none;
                font-size: 12px;
                &>li{
                    list-style: none;
                    line-height: 35px;
                    font-size: 12px;
                    color: gray;
                    &:hover{
                        color: orangered;
                    } 
                }

            }
            &>.show{
                width: 100px;
                display: flex;
                &>a{
                    text-decoration: none;
                    font-size: 12px;
                    color: gray;
                }
                &>a>li{
                    list-style: none;
                    line-height: 35px;

                    &:hover{
                        color: orangered;
                    }
                }
                &>a:nth-child(2)>li{
                    color: orangered;
                    margin-left: 10px;
                }
                
            }
            &>.hide{
                width:200px;
                display: none;
                height: 35px;
                background-color: #F5F5F5;
                &>a{
                    float: left;
                    line-height: 35px;
                    text-decoration: none;
                    font-size: 12px;
                    color: gray;
                }
                &>a:nth-of-type(1){
                    color: orangered;
                    margin-right: 12px;
                }
            }
            &>a:nth-child(2)>li{
                color: orangered;
            }
            &>li{
                list-style: none;
                line-height: 35px;
                font-size: 12px;
                color: gray;
                &:hover{
                    color: orangered;
                }
            }
        }
    }
}
#nav{
    width: 100%;
    background-color: white
}
nav{
    @extend %w;
    height: 150px;
    display: flex;
    
    .navleft{
        width: 200px;
        height: 100px;
        overflow: hidden;

        &>img{
            margin-top: 25px;
            width: 100%;
            height: 100%;
        }
    }

    .navright{
        margin-left: 200px;
        width: 560px;
        height: 150px;
        // line-height: 150px;
        display: flex;
        align-items: center;
        align-content:center;
        flex-wrap: wrap;
        position: relative;
        
        

        &>input{
            width: 450px;
            height: 40px;
            border: 2px solid orangered;
            border-radius: 10px 0px 0px 10px;
            outline: none;
            text-indent: 10px;
        }
        &>.searchBtn{
            outline: none;
            width: 100px;
            height: 40px;
            border: 2px solid orangered;
            background-color: orangered;
            border-radius: 0px 10px 10px 0px;
            color: wheat;
            font-size: 20px;
        }

        &>.navlist{
            width: 530px;
            height: 30px;
            line-height: 20px;

            &>ul{
                display: flex;
                justify-content: space-around;

                &>li{
                    list-style: none;
                    font-size: 10px;
                    width: 50px;
                    text-align: center;
                }
            }
        }
    }
}

